<template>
	<view class="header">
		<up-navbar
			:autoBack="true"
			@rightClick="clearAllMsg"
			placeholder
			:safeAreaInsetTop="true"
			:statusBar="true">
			<template #center>
				<up-tabs :list="title" scrollable="false"></up-tabs>
			</template>
			<template #right>
				<img :src="clearPic" class="right-icon" />
			</template>
		</up-navbar>
	</view>
	<view class="group-box" :style="{ top: topHeight }">
		<up-radio-group
			v-model="radiovalue"
			placement="row"
			class="radio-box"
			@change="changeRadio">
			<up-radio :label="t('default')" name="push"></up-radio>
			<up-radio :label="t('work')" name="work">
				<template #icon>
					<up-icon
						name="bell"
						:color="
							radiovalue === 'work' ? '#fff' : '#000000'
						"></up-icon>
				</template>
			</up-radio>
			<up-radio :label="t('exception')" name="exception">
				<template #icon>
					<up-icon
						name="warning"
						:color="
							radiovalue === 'exception' ? '#fff' : '#333333'
						"></up-icon>
				</template>
			</up-radio>
		</up-radio-group>
	</view>
	<InfoList
		:pushTitleList="pushTitle"
		:type="radiovalue"
		ref="infoListRef"
		:deviceSn="isVisible ? props.device_sn : undefined"
		@changeCount="getCount" />
	<TipsModal
		v-if="showTip"
		:contentText="t('message.readIsAll')"
		@handleCancel="cancelReadAll"
		@handleConfirm="confirmReadAll" />
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted, computed } from "vue";
import InfoList from "@/components/infoList/index.vue";
import { useI18n } from "vue-i18n";
import { getEventTitle, getMsgCount, getEventCount } from "@/service/index";
import TipsModal from "@/components/tipsModal/index.vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
const allReadTimeStore: any = useUniversalStorage("allReadTime", null);
const clearPic = resolveStaticPath("image/info/clear.png");
const topHeight = ref("51px");
const props = defineProps<{
	device_sn?: string;
}>();
// 国际化
const { locale, t } = useI18n();
interface EventTitleItem {
	id: number;
	code: string | number;
	ch: string;
	en: string;
}
const count = ref({
	allCont: 0,
	readCont: 0,
});
const isVisible = computed(() => !!props.device_sn);

const displayStyle = computed(() => (isVisible.value ? "flex" : "none"));
const title = reactive([{ name: "通知消息", badge: { value: "" } }]);
const radiovalue = ref<string>("push");
const readArrStore: any = useUniversalStorage("readArr", []);
const pushTitle = ref<EventTitleItem[]>([]);
const showTip = ref(false);
const infoListRef = ref(null);
const cancelReadAll = () => {
	showTip.value = false;
};
const confirmReadAll = () => {
	allReadTimeStore.value = Date.now();
	readArrStore.value = [];
	uni.hideTabBarRedDot({
		index: 2,
	});
	nextTick(() => {
		infoListRef.value?.refresh();
		getCount();
	});
	showTip.value = false;
};
const clearAllMsg = () => {
	showTip.value = true;
};
const changeRadio = (v: string) => {
	radiovalue.value = v;
};
const getTitle = async () => {
	try {
		const { data } = await getEventTitle();
		if (data.code === 0 && data.data?.length) {
			pushTitle.value = data.data;
		}
	} catch (err) {
		console.error("获取标题失败:", err);
	}
};
const getBadgeValue = (count: number, readCount: number = 0): string => {
	if (count <= 0) return "";
	if (count > 99) return "99+";
	if (count < readCount) return count;
	return String(count - readCount);
};
const getCount = async () => {
	const { data } = await getMsgCount({
		cursor: allReadTimeStore.value || "",
	});
	const count = data.data.count;
	title[0].badge.value = getBadgeValue(count, readArrStore.value.length);
	if (count > 0) {
		uni.showTabBarRedDot({
			index: 2,
		});
	} else {
		uni.hideTabBarRedDot({
			index: 2,
		});
	}
};

onShow(() => {
	getTitle();
	getCount();
});
onMounted(() => {
	// 获取状态栏高度
	// #ifdef APP-PLUS
	const statusBarHeight = ref(0);
	const systemInfo = uni.getSystemInfoSync();
	statusBarHeight.value = systemInfo.statusBarHeight || 0;
	topHeight.value = statusBarHeight.value + 51 + "px";
	// #endif
});
</script>

<style lang="scss" scoped>
.header {
	:deep(.u-navbar__content__left) {
		display: v-bind(displayStyle);
	}
	:deep(.u-navbar__content) {
		height: 50px !important;
		border-bottom: 1px solid #f5f5f5;
	}
	:deep(.u-badge--not-dot) {
		right: -2px;
		top: -2px;
		transform: scale(0.6);
		position: absolute;
		font-size: 12px;
		background-color: #e43d33;
		color: #fff;
		font-weight: 400;
		padding: 0 5px;
		-webkit-transform: scale(0.6);
		height: 20px;
		line-height: 18px;
	}
	:deep(.u-tabs__wrapper__nav__item__text) {
		font-size: 18px;
		font-weight: 800;
		color: rgba(0, 0, 0, 0.9);
	}
	:deep(.uni-scroll-view-content) {
		position: relative;
	}
	:deep(.u-tabs__wrapper__nav__line) {
		width: 60% !important;
		background: #277bc4;
		left: 20%;
		transform: none !important;
	}
	.right-icon {
		width: 24px;
		padding: 5px;
	}
}
.radio-box {
	display: flex;
	justify-content: space-around;
	padding: 9rpx 0;
	border-bottom: 1px solid #f5f5f5;
	:deep(.u-radio__text) {
		color: rgba(0, 0, 0, 0.9) !important;
		font-size: 14px !important;
	}
	:deep(.u-radio__icon-wrap--circle) {
		width: 20px !important;
		height: 20px !important;
	}
}
.group-box {
	top: 51px;
	position: fixed;
	z-index: 99;
	background-color: #fff;
	width: 100%;
}
</style>
